import React from 'react';

export default class extends React.Component{
  constructor(props){
    super();
    this.state={
      active:props.active,
      Change:props.Change
    }
  }
  UNSAFE_componentWillReceiveProps(props){
    this.setState({
      active:props.active,
    })
  }
  Triggle(){
    let active=this.state.active;
    if(active===undefined){
      active=false;
    }
    this.setState({
      active:!active
    },()=>{
      if(this.props.Change!==undefined ){
          this.props.Change();
      }
  });
  }
  render(){
    return(
      <svg xmlns="http://www.w3.org/2000/svg"  onClick={e=>this.Triggle(e)} fill={this.state.active?"#5393eb":"#999"} preserveAspectRatio="xMidYMid" width="43.188" height="45.656" viewBox="0 0 43.188 45.656">
        <path d="M43.186,43.628 L43.159,43.628 L43.159,43.953 C43.159,44.890 42.573,45.648 41.852,45.648 L1.317,45.648 C0.595,45.648 0.009,44.889 0.009,43.953 L0.009,43.628 L0.008,43.628 L0.008,14.049 L0.026,14.049 C-0.034,13.280 0.068,12.460 0.379,11.653 L3.310,4.054 C4.182,1.791 6.398,0.014 8.350,0.014 L34.840,0.014 C36.792,0.014 39.008,1.791 39.881,4.054 L42.812,11.653 C43.122,12.460 43.225,13.280 43.164,14.049 L43.186,14.049 L43.186,43.628 ZM2.705,42.258 L40.487,42.258 L40.487,33.131 L22.944,33.131 C22.199,33.131 21.594,32.348 21.594,31.381 C21.594,30.414 22.199,29.632 22.944,29.632 L40.487,29.632 L40.487,26.132 L31.040,26.132 C30.295,26.132 29.690,25.350 29.690,24.383 C29.690,23.415 30.295,22.633 31.040,22.633 L40.487,22.633 L40.487,17.210 C40.368,17.224 40.260,17.258 40.139,17.258 L3.051,17.258 C2.930,17.258 2.823,17.224 2.705,17.210 L2.705,42.258 ZM40.398,13.218 L37.467,5.619 C37.042,4.518 35.790,3.514 34.840,3.514 L8.350,3.514 C7.399,3.514 6.148,4.518 5.723,5.619 L2.793,13.218 C2.685,13.499 2.682,13.676 2.689,13.714 C2.689,13.711 2.690,13.704 2.699,13.704 C2.731,13.704 2.848,13.758 3.051,13.758 L40.139,13.758 C40.381,13.758 40.505,13.683 40.529,13.659 C40.524,13.663 40.509,13.512 40.398,13.218 ZM7.783,33.076 L15.558,33.076 L15.558,25.301 C15.558,24.441 16.253,23.746 17.114,23.746 C17.974,23.746 18.669,24.441 18.669,25.301 L18.669,34.631 C18.669,35.491 17.974,36.186 17.114,36.186 L7.783,36.186 C6.924,36.186 6.229,35.491 6.229,34.631 C6.229,33.772 6.924,33.076 7.783,33.076 Z" class="cls-1"/>
     </svg>
    );
  }
}